<keira-top-bar [selected]="handlerService.selected" [selectedName]="handlerService.selectedName" [isNew]="handlerService.isNew" />

<div class="container-fluid">
  @if (editorService.loading) {
    <span [translate]="'LOADING'"></span>
  }

  @if (editorService.form && !!editorService.loadedEntityId && !editorService.loading) {
    <div>
      <div class="content-block">
        <keira-query-output
          [docUrl]="docUrl"
          [isNew]="editorService.isNew"
          [diffQuery]="editorService.diffQuery"
          [fullQuery]="editorService.fullQuery"
          [error]="editorService.error"
          [entityTable]="editorService.entityTable"
          [editorService]="editorService"
          (executeQuery)="save($event)"
        />
      </div>
      <div class="content-block">
        <form [formGroup]="editorService.form" class="form-group edit-form">
          <div class="row">
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
              <label class="control-label" for="guid">guid</label>
              <input [formControlName]="'guid'" id="guid" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
              <label class="control-label" for="map">map</label>
              <keira-map-selector-btn
                [config]="{ name: 'map' }"
                [control]="editorService.form.controls.map"
                [disabled]="editorService.form.controls.map.disabled"
              />
              <input [formControlName]="'map'" id="map" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
              <label class="control-label" for="zoneId">zoneId</label>
              <input [formControlName]="'zoneId'" id="zoneId" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
              <label class="control-label" for="areaId">areaId</label>
              <keira-area-selector-btn
                [config]="{ name: 'areaId' }"
                [control]="editorService.form.controls.areaId"
                [disabled]="editorService.form.controls.areaId.disabled"
              />
              <input [formControlName]="'areaId'" id="areaId" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
              <label class="control-label" for="spawnMask">spawnMask</label>
              <keira-flags-selector-btn
                [control]="editorService.form.controls.spawnMask"
                [disabled]="editorService.form.controls.spawnMask.disabled"
                [config]="{ flags: SPAWN_MASK, name: 'spawnMask' }"
                [modalClass]="'modal-lg'"
              />
              <input [formControlName]="'spawnMask'" id="spawnMask" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
              <label class="control-label" for="phaseMask">phaseMask</label>
              <keira-flags-selector-btn
                [control]="editorService.form.controls.phaseMask"
                [disabled]="editorService.form.controls.phaseMask.disabled"
                [config]="{ flags: PHASE_MASK, name: 'phaseMask' }"
                [modalClass]="'modal-lg'"
              />
              <input [formControlName]="'phaseMask'" id="phaseMask" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
              <label class="control-label" for="equipment_id">equipment_id</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.SPAWN.EQUIPMENT_ID_TOOLTIP' | translate"></i>
              <input [formControlName]="'equipment_id'" id="equipment_id" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
              <label class="control-label" for="position_x">position_x</label>
              <input [formControlName]="'position_x'" id="position_x" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
              <label class="control-label" for="position_y">position_y</label>
              <input [formControlName]="'position_y'" id="position_y" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
              <label class="control-label" for="position_z">position_z</label>
              <input [formControlName]="'position_z'" id="position_z" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
              <label class="control-label" for="orientation">orientation</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.SPAWN.ORIENTATION' | translate"></i>
              <input [formControlName]="'orientation'" id="orientation" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
              <label class="control-label" for="spawntimesecs">spawntimesecs</label>
              <input [formControlName]="'spawntimesecs'" id="spawntimesecs" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
              <label class="control-label" for="wander_distance">wander_distance</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.SPAWN.SPAWN_DIST_TOOLTIP' | translate"></i>
              <input [formControlName]="'wander_distance'" id="wander_distance" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
              <label class="control-label" for="currentwaypoint">currentwaypoint</label>
              <input [formControlName]="'currentwaypoint'" id="currentwaypoint" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
              <label class="control-label" for="curhealth">curhealth</label>
              <input [formControlName]="'curhealth'" id="curhealth" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
              <label class="control-label" for="curmana">curmana</label>
              <input [formControlName]="'curmana'" id="curmana" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
              <label class="control-label" for="MovementType">MovementType</label>
              <keira-generic-option-selector
                [control]="editorService.form.controls.MovementType"
                id="MovementType"
                [optionList]="MOVEMENT_TYPE"
              />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
              <label class="control-label" for="npcflag">npcflag</label>
              <keira-flags-selector-btn
                [control]="editorService.form.controls.npcflag"
                [disabled]="editorService.form.controls.npcflag.disabled"
                [config]="{ flags: NPC_FLAGS, name: 'npcflag' }"
              />
              <input [formControlName]="'npcflag'" id="npcflag" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
              <label class="control-label" for="unit_flags">unit_flags</label>
              <keira-flags-selector-btn
                [control]="editorService.form.controls.unit_flags"
                [disabled]="editorService.form.controls.unit_flags.disabled"
                [config]="{ flags: UNIT_FLAGS, name: 'unit_flags' }"
              />
              <input [formControlName]="'unit_flags'" id="unit_flags" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
              <label class="control-label" for="dynamicflags">dynamicflags</label>
              <keira-flags-selector-btn
                [control]="editorService.form.controls.dynamicflags"
                [disabled]="editorService.form.controls.dynamicflags.disabled"
                [config]="{ flags: DYNAMIC_FLAGS, name: 'dynamicflags' }"
              />
              <input [formControlName]="'dynamicflags'" id="dynamicflags" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
              <label class="control-label" for="ScriptName">ScriptName</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.SPAWN.SCRIPT_NAME' | translate"></i>
              <input [formControlName]="'ScriptName'" id="ScriptName" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
              <label class="control-label" for="Comment">Comment</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.SPAWN.COMMENT' | translate"></i>
              <input [formControlName]="'Comment'" id="Comment" class="form-control form-control-sm" />
            </div>
            <div class="col-12 form-error" [hidden]="editorService.isFormIdUnique()">
              <i class="fas fa-exclamation-triangle"></i>
              <span [innerHTML]="'UNIQUE' | translate: { ENTITY_SECOND_ID_FIELD: editorService.entitySecondIdField }"></span>
            </div>
          </div>
        </form>
        <div class="row">
          <div class="col-12">
            <keira-editor-buttons
              [selectedRowId]="editorService.selectedRowId"
              (deleteSelectedRow)="editorService.deleteSelectedRow()"
              (addNewRow)="editorService.addNewRow()"
              (duplicateRow)="editorService.addNewRow(true)"
            />
            <ngx-datatable
              id="editor-table"
              class="bootstrap table table-striped text-center datatable-select"
              [rows]="editorService.newRows"
              [headerHeight]="DTCFG.headerHeight"
              [footerHeight]="DTCFG.footerHeight"
              [columnMode]="DTCFG.columnMode"
              [rowHeight]="DTCFG.rowHeight"
              [selectionType]="DTCFG.selectionType"
              (select)="editorService.onRowSelection($event)"
              (keydown.delete)="editorService.deleteSelectedRow()"
            >
              <ngx-datatable-column [minWidth]="30" [maxWidth]="30" [sortable]="false">
                <ng-template let-row="row" ngx-datatable-cell-template>
                  <i [hidden]="!editorService.isRowSelected(row)" class="fas fa-chevron-right"></i>
                </ng-template>
              </ngx-datatable-column>
              <ngx-datatable-column name="guid" prop="guid" [minWidth]="80" />
              <ngx-datatable-column name="M" prop="map" [minWidth]="42" />
              <ngx-datatable-column name="Z" prop="zoneId" [minWidth]="42" />
              <ngx-datatable-column name="A" prop="areaId" [minWidth]="42" />
              <ngx-datatable-column name="SM" prop="spawnMask" [minWidth]="42" />
              <ngx-datatable-column name="PM" prop="phaseMask" [minWidth]="42" />
              <ngx-datatable-column name="Equip" prop="equipment_id" [minWidth]="42" />
              <ngx-datatable-column name="position_x" prop="position_x" [minWidth]="90" />
              <ngx-datatable-column name="position_y" prop="position_y" [minWidth]="90" />
              <ngx-datatable-column name="position_z" prop="position_z" [minWidth]="90" />
              <ngx-datatable-column name="orient." prop="orientation" [minWidth]="90" />
              <ngx-datatable-column name="Time" prop="spawntimesecs" [minWidth]="50" />
              <ngx-datatable-column name="Dist" prop="wander_distance" [minWidth]="42" />
              <ngx-datatable-column name="CW" prop="currentwaypoint" [minWidth]="42" />
              <ngx-datatable-column name="Movement" prop="MovementType" [minWidth]="42" />
              <ngx-datatable-column name="npcFlags" prop="npcflag" [minWidth]="42" />
              <ngx-datatable-column name="unitFlags" prop="unit_flags" [minWidth]="42" />
              <ngx-datatable-column name="dynFlags" prop="dynamicflags" [minWidth]="42" />
              <ngx-datatable-column name="ScriptName" prop="ScriptName" [minWidth]="80" />
              <ngx-datatable-column name="Comment" prop="Comment" [minWidth]="42" />
            </ngx-datatable>
          </div>
        </div>
      </div>
    </div>
  }
</div>
